<div>
    <%@ page contentType="text/html; charset=utf-8"%>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Amaze UI Admin index Examples</title>
        <meta name="description" content="这是一个 index 页面">
        <meta name="keywords" content="index">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="icon" type="image/png" href="/assets/i/favicon.png">
        <link rel="apple-touch-icon-precomposed" href="/assets/i/app-icon72x72@2x.png">
        <meta name="apple-mobile-web-app-title" content="Amaze UI" />
        <script src="/assets/js/echarts.min.js"></script>
        <link rel="stylesheet" href="/assets/css/amazeui.min.css" />
        <link rel="stylesheet" href="/assets/css/amazeui.datatables.min.css" />
        <link rel="stylesheet" href="/assets/css/app.css">
        <script src="/assets/js/jquery.min.js"></script>
        <script src="/assets/js/theme.js"></script>

        <script src="/assets/js/amazeui.min.js"></script>
        <script src="/assets/js/amazeui.datatables.min.js"></script>
        <script src="/assets/js/dataTables.responsive.min.js"></script>
        <script src="/assets/js/app.js"></script>
        <script src="/assets/js/jquery.form.js"></script>
        <script src="/assets/js/dayuanit.js"></script>
        <script src="/assets/js/reconnecting-websocket.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    </head>


    <header>
        <!-- logo -->
        <div class="am-fl tpl-header-logo">
            <a href="javascript:;">大猿ATM</a>
        </div>
        <!-- 右侧内容 -->
        <div class="tpl-header-fluid">
            <!-- 侧边切换 -->

            <!-- 搜索 -->

            <!-- 其它功能-->
            <div class="am-fr tpl-header-navbar" id="msgDiv">
                <ul>
                    <!-- 欢迎语 -->
                    <li class="am-text-sm tpl-header-navbar-welcome">
                        <a href="javascript:;">欢迎你, <span>${userLogin.username}</span> </a>
                    </li>

                    <!-- 新邮件 -->

                    <!-- 新提示 -->
                    <li class="am-dropdown" data-am-dropdown>
                        <a href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle>
                            <i class="am-icon-bell"></i>
                            <span class="am-badge am-badge-warning am-round item-feed-badge">{{dotCount}}</span>
                        </a>

                        <!-- 弹出列表 -->
                        <ul class="am-dropdown-content tpl-dropdown-content">

                            <li class="tpl-dropdown-menu-notifications" v-for="xxx in unReadMsg">
                                <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                    <div class="tpl-dropdown-menu-notifications-title">
                                        <i class="am-icon-line-chart"></i>
                                        <span> {{xxx.context}}</span>
                                    </div>
                                    <div class="tpl-dropdown-menu-notifications-time">
                                        12分钟前
                                    </div>
                                </a>
                            </li>

                            <li class="tpl-dropdown-menu-notifications">
                                <a href="/user/toMessage.do" class="tpl-dropdown-menu-notifications-item am-cf">
                                    <i class="am-icon-bell"></i> 进入列表…
                                </a>
                            </li>
                        </ul>
                    </li>

                    <!-- 退出 -->
                    <li class="am-text-sm">
                        <a href="###" onclick="signout()">
                            <span class="am-icon-sign-out"></span> 退出
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <audio id="messageAudio" src="/message/voice.do" autoplay type="audio/mpeg"></audio>

    </header>
</div>

<script>

    var msgVue = new Vue({
        el : '#msgDiv',
        data : {
            dotCount : 0,
            unReadMsg : []
        },
        created : function () {
            loadUnReadMsg();
        }
    });

    function loadUnReadMsg() {
        dayuanit.ajax('/message/unReadMsg.do',{

        }, function (result) {
            msgVue.unReadMsg = result.data;
            msgVue.dotCount = result.data.length;
        })
    }

    function signout() {
        dayuanit.ajax('/user/signOut.do', {}, function (result) {
            window.location.href = '/';
        })
    }

    var ws = new ReconnectingWebSocket("ws://127.0.0.1:8092/atmWebSocket.do");

    ws.onopen = function(evt) {
        console.log("Connection open ...");
        ws.send("Hello WebSockets!");
    };

    ws.onmessage = function(evt) {
        console.log( "Received Message: " + evt.data);
        msgVue.dotCount ++;
        $('#messageAudio').attr('src', '/message/voice.do?context=' + evt.data)
    };

    ws.onclose = function(evt) {
        console.log("Connection closed.");
    };

</script>
